<div [formGroup]="form">
  <div class="form-field">
    <label for="wallet">{{ 'send.from-label' | translate }}</label>
    <div class="-select">
      <select formControlName="wallet" id="wallet" [attr.disabled]="busy ? 'true' : null" [ngClass]="{'element-disabled' : busy}">
        <option disabled hidden [ngValue]="''">{{ 'send.select-wallet' | translate }}</option>
        <ng-container *ngIf="wallets">
          <option *ngFor="let wallet of wallets" [disabled]="!wallet.coins || wallet.coins.isLessThanOrEqualTo(0)" [ngValue]="wallet">
            {{ wallet.label }} -
            <span *ngIf="wallet.coins && wallet.hours">
              {{ (wallet.coins ? wallet.coins.toString() : 0) | amount }}
              ({{ wallet.hours.toString() | amount:false }})
            </span>
          </option>
        </ng-container>
      </select>
    </div>
  </div>
  <div class="form-field">
    <label for="address">{{ 'send.to-label' | translate }}</label>
    <input formControlName="address" id="address" [attr.disabled]="busy ? 'true' : null">
  </div>
  <div class="form-field">
    <label for="amount" class="amount-label">{{ 'send.amount-label' | translate }}</label>
    <div class="coin-selector-container" *ngIf="price" [ngClass]="{ 'element-disabled': busy }">
      <app-double-button
        [leftButtonText]="'coin' | commonText"
        [rightButtonText]="'common.usd' | translate"
        className="light small"
        [activeButton]="selectedCurrency"
        (onStateChange)="changeActiveCurrency($event)"
      ></app-double-button>
    </div>
    <div class="-input-addon">
      <input formControlName="amount" id="amount" [attr.disabled]="busy ? 'true' : null">
      <span>{{ selectedCurrency === doubleButtonActive.LeftButton ? ('coin' | commonText) : ('common.usd' | translate) }}</span>
    </div>
    <div class="coins-value-label" [ngClass]="{ red: value >= 0 && valueGreaterThanBalance }">
      <span *ngIf="price && value < 0">{{ 'send.invalid-amount' | translate }}</span>
      <span *ngIf="price && value >= 0 && selectedCurrency === doubleButtonActive.LeftButton">
        &#x007e; {{ value | number:'1.0-2' }} {{ 'common.usd' | translate }}
      </span>
      <span *ngIf="price && value >= 0 && selectedCurrency === doubleButtonActive.RightButton">
        &#x007e; {{ value | amount }}
      </span>
      <div class="link" [ngClass]="{ 'centerd-link': !price }" (click)="assignAll()">({{ 'send.send-all-available-coins' | translate }})</div>
    </div>
  </div>
  <div class="form-field">
    <label for="note">
      {{ 'send.personal-note-label' | translate }}
      <mat-icon [matTooltip]="'send.personal-note-help' | translate">help</mat-icon>
    </label>
    <input formControlName="note" id="note" (keydown.enter)="preview()" [maxlength]="maxNoteChars" [attr.disabled]="busy ? 'true' : null">
  </div>
  <div class="-buttons">
    <app-button #previewButton (action)="preview()" [disabled]="!form.valid">
      {{ 'send.preview-button' | translate }}
    </app-button>
    <app-button #sendButton (action)="send()" class="primary" [disabled]="!form.valid">
      {{ 'send.send-button' | translate }}
    </app-button>
  </div>
</div>
